import { Header } from '../components/Header';
import { Footer } from '../components/Footer';
import PageHeader from '../components/PageHeader';
import { useDocumentTitle } from '../hooks/useDocumentTitle';
import { ChevronRight, Shield } from 'lucide-react';

export const PrivacyPolicyPage = () => {
  useDocumentTitle('Privacy Policy');
  
  return (
    <div className="flex flex-col min-h-screen w-full bg-white">
      <Header />
      <main className="flex-grow">
        <PageHeader 
          title="Privacy Policy"
          subtitle="Your privacy is important to us. Learn how we collect, use, and protect your information."
          icon={Shield}
        />
        {/* Breadcrumb */}
        <div className="bg-gray-50 py-3">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex items-center text-sm text-gray-500">
              <a href="/" className="hover:text-[#0e4c92]">
                Home
              </a>
              <ChevronRight className="h-4 w-4 mx-2" />
              <span className="text-gray-700 font-medium">Privacy Policy</span>
            </div>
          </div>
        </div>
        {/* Content */}
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8 lg:p-12">
            <div className="text-center mb-12">
              <div className="inline-block bg-gray-100 text-gray-600 px-4 py-2 rounded-full text-sm font-medium">
                Last Updated: June 15, 2025
              </div>
            </div>
            
            <div className="prose prose-lg max-w-none space-y-8">
              <section className="bg-blue-50 border-l-4 border-[#0e4c92] p-6 rounded-r-lg">
                <h2 className="text-2xl font-bold text-[#0e4c92] mb-4 mt-0">Introduction</h2>
                <p className="text-gray-700 leading-relaxed mb-4">
                  MedSelectHub ("we," "our," or "us") is committed to protecting
                  your privacy. This Privacy Policy explains how we collect, use,
                  disclose, and safeguard your information when you visit our
                  website, including any other media form, media channel, mobile
                  website, or mobile application related or connected to it
                  (collectively, the "Site").
                </p>
                <p className="text-gray-700 leading-relaxed">
                  Please read this Privacy Policy carefully. If you do not agree
                  with the terms of this Privacy Policy, please do not access the
                  Site.
                </p>
              </section>

              <section className="pt-6">
                <h2 className="text-2xl font-bold text-[#0e4c92] mb-6 pb-2 border-b border-gray-200">Information We Collect</h2>
                <p className="text-gray-700 leading-relaxed mb-6">
                  We collect information in the following ways:
                </p>
                
                <div className="space-y-6">
                  <div className="bg-gray-50 p-6 rounded-lg">
                    <h3 className="text-xl font-semibold text-gray-800 mb-4">Personal Data</h3>
                    <p className="text-gray-700 leading-relaxed mb-4">
                      When you use our Site, we may ask you to provide certain
                      personally identifiable information that can be used to contact or
                      identify you ("Personal Data"). Personal Data may include, but is
                      not limited to:
                    </p>
                    <ul className="grid grid-cols-1 md:grid-cols-2 gap-2 text-gray-700">
                      <li className="flex items-center">
                        <span className="w-2 h-2 bg-[#0e4c92] rounded-full mr-3"></span>
                        Email address
                      </li>
                      <li className="flex items-center">
                        <span className="w-2 h-2 bg-[#0e4c92] rounded-full mr-3"></span>
                        First name and last name
                      </li>
                      <li className="flex items-center">
                        <span className="w-2 h-2 bg-[#0e4c92] rounded-full mr-3"></span>
                        Phone number
                      </li>
                      <li className="flex items-center">
                        <span className="w-2 h-2 bg-[#0e4c92] rounded-full mr-3"></span>
                        Address information
                      </li>
                      <li className="flex items-center">
                        <span className="w-2 h-2 bg-[#0e4c92] rounded-full mr-3"></span>
                        Cookies and Usage Data
                      </li>
                    </ul>
                  </div>

                  <div className="bg-gray-50 p-6 rounded-lg">
                    <h3 className="text-xl font-semibold text-gray-800 mb-4">Usage Data</h3>
                    <p className="text-gray-700 leading-relaxed">
                      We may also collect information about how the Site is accessed and
                      used ("Usage Data"). This Usage Data may include information such
                      as your computer's Internet Protocol address (IP address), browser
                      type, browser version, the pages of our Site that you visit, the
                      time and date of your visit, the time spent on those pages, unique
                      device identifiers, and other diagnostic data.
                    </p>
                  </div>

                  <div className="bg-gray-50 p-6 rounded-lg">
                    <h3 className="text-xl font-semibold text-gray-800 mb-4">Tracking & Cookies Data</h3>
                    <p className="text-gray-700 leading-relaxed mb-4">
                      We use cookies and similar tracking technologies to track activity
                      on our Site and hold certain information. Cookies are files with a
                      small amount of data which may include an anonymous unique
                      identifier.
                    </p>
                    <p className="text-gray-700 leading-relaxed">
                      You can instruct your browser to refuse all cookies or to indicate
                      when a cookie is being sent. However, if you do not accept
                      cookies, you may not be able to use some portions of our Site.
                    </p>
                  </div>
                </div>
              </section>

              <section className="pt-6">
                <h2 className="text-2xl font-bold text-[#0e4c92] mb-6 pb-2 border-b border-gray-200">How We Use Your Information</h2>
                <p className="text-gray-700 leading-relaxed mb-6">
                  We use the collected data for various purposes:
                </p>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="flex items-start p-4 bg-gray-50 rounded-lg">
                    <span className="w-2 h-2 bg-[#0e4c92] rounded-full mt-2 mr-3 flex-shrink-0"></span>
                    <span className="text-gray-700">To provide and maintain our Service</span>
                  </div>
                  <div className="flex items-start p-4 bg-gray-50 rounded-lg">
                    <span className="w-2 h-2 bg-[#0e4c92] rounded-full mt-2 mr-3 flex-shrink-0"></span>
                    <span className="text-gray-700">To notify you about changes to our Service</span>
                  </div>
                  <div className="flex items-start p-4 bg-gray-50 rounded-lg">
                    <span className="w-2 h-2 bg-[#0e4c92] rounded-full mt-2 mr-3 flex-shrink-0"></span>
                    <span className="text-gray-700">To allow you to participate in interactive features</span>
                  </div>
                  <div className="flex items-start p-4 bg-gray-50 rounded-lg">
                    <span className="w-2 h-2 bg-[#0e4c92] rounded-full mt-2 mr-3 flex-shrink-0"></span>
                    <span className="text-gray-700">To provide customer support</span>
                  </div>
                  <div className="flex items-start p-4 bg-gray-50 rounded-lg">
                    <span className="w-2 h-2 bg-[#0e4c92] rounded-full mt-2 mr-3 flex-shrink-0"></span>
                    <span className="text-gray-700">To gather analysis for service improvement</span>
                  </div>
                  <div className="flex items-start p-4 bg-gray-50 rounded-lg">
                    <span className="w-2 h-2 bg-[#0e4c92] rounded-full mt-2 mr-3 flex-shrink-0"></span>
                    <span className="text-gray-700">To monitor usage and address technical issues</span>
                  </div>
                </div>
              </section>

              <section className="pt-6">
                <h2 className="text-2xl font-bold text-[#0e4c92] mb-6 pb-2 border-b border-gray-200">Disclosure of Your Information</h2>
                <p className="text-gray-700 leading-relaxed mb-6">
                  We may disclose your Personal Data in the following situations:
                </p>
                <div className="space-y-4">
                  <div className="border-l-4 border-blue-300 bg-blue-50 p-4 rounded-r-lg">
                    <h4 className="font-semibold text-gray-800 mb-2">Business Transfers</h4>
                    <p className="text-gray-700">
                      If we are involved in a merger, acquisition, or sale of assets, your Personal Data may be transferred.
                    </p>
                  </div>
                  <div className="border-l-4 border-blue-300 bg-blue-50 p-4 rounded-r-lg">
                    <h4 className="font-semibold text-gray-800 mb-2">To Affiliates</h4>
                    <p className="text-gray-700">
                      We may share your information with our affiliates, in which case we will require those affiliates to honor this Privacy Policy.
                    </p>
                  </div>
                  <div className="border-l-4 border-blue-300 bg-blue-50 p-4 rounded-r-lg">
                    <h4 className="font-semibold text-gray-800 mb-2">To Business Partners</h4>
                    <p className="text-gray-700">
                      We may share your information with our business partners to offer you certain products, services, or promotions.
                    </p>
                  </div>
                  <div className="border-l-4 border-blue-300 bg-blue-50 p-4 rounded-r-lg">
                    <h4 className="font-semibold text-gray-800 mb-2">With Your Consent</h4>
                    <p className="text-gray-700">
                      We may disclose your Personal Data for any other purpose with your consent.
                    </p>
                  </div>
                  <div className="border-l-4 border-blue-300 bg-blue-50 p-4 rounded-r-lg">
                    <h4 className="font-semibold text-gray-800 mb-2">Other Legal Requirements</h4>
                    <p className="text-gray-700">
                      We may disclose your Personal Data in the good faith belief that such action is necessary to comply with a legal obligation or protect and defend our rights or property.
                    </p>
                  </div>
                </div>
              </section>

              <section className="pt-6">
                <h2 className="text-2xl font-bold text-[#0e4c92] mb-6 pb-2 border-b border-gray-200">Security of Your Information</h2>
                <div className="bg-yellow-50 border border-yellow-200 p-6 rounded-lg">
                  <p className="text-gray-700 leading-relaxed">
                    The security of your Personal Data is important to us, but
                    remember that no method of transmission over the Internet or
                    method of electronic storage is 100% secure. While we strive to
                    use commercially acceptable means to protect your Personal Data,
                    we cannot guarantee its absolute security.
                  </p>
                </div>
              </section>

              <section className="pt-6">
                <h2 className="text-2xl font-bold text-[#0e4c92] mb-6 pb-2 border-b border-gray-200">Your Data Protection Rights</h2>
                <p className="text-gray-700 leading-relaxed mb-6">
                  Depending on your location, you may have certain rights regarding
                  your personal information, such as:
                </p>
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                  <div className="flex items-start p-4 bg-green-50 border border-green-200 rounded-lg">
                    <span className="w-2 h-2 bg-green-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                    <span className="text-gray-700">
                      The right to access, update, or delete the information we have on you
                    </span>
                  </div>
                  <div className="flex items-start p-4 bg-green-50 border border-green-200 rounded-lg">
                    <span className="w-2 h-2 bg-green-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                    <span className="text-gray-700">
                      The right of rectification - the right to have your information corrected if it is inaccurate or incomplete
                    </span>
                  </div>
                  <div className="flex items-start p-4 bg-green-50 border border-green-200 rounded-lg">
                    <span className="w-2 h-2 bg-green-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                    <span className="text-gray-700">
                      The right to object to our processing of your Personal Data
                    </span>
                  </div>
                  <div className="flex items-start p-4 bg-green-50 border border-green-200 rounded-lg">
                    <span className="w-2 h-2 bg-green-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                    <span className="text-gray-700">
                      The right of restriction - the right to request that we restrict the processing of your personal information
                    </span>
                  </div>
                  <div className="flex items-start p-4 bg-green-50 border border-green-200 rounded-lg">
                    <span className="w-2 h-2 bg-green-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                    <span className="text-gray-700">
                      The right to data portability - the right to be provided with a copy of your Personal Data
                    </span>
                  </div>
                  <div className="flex items-start p-4 bg-green-50 border border-green-200 rounded-lg">
                    <span className="w-2 h-2 bg-green-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                    <span className="text-gray-700">
                      The right to withdraw consent at any time where we relied on your consent
                    </span>
                  </div>
                </div>
              </section>

              <section className="pt-6">
                <h2 className="text-2xl font-bold text-[#0e4c92] mb-6 pb-2 border-b border-gray-200">Changes to This Privacy Policy</h2>
                <div className="bg-gray-50 p-6 rounded-lg space-y-4">
                  <p className="text-gray-700 leading-relaxed">
                    We may update our Privacy Policy from time to time. We will notify
                    you of any changes by posting the new Privacy Policy on this page
                    and updating the "Last Updated" date at the top of this Privacy
                    Policy.
                  </p>
                  <p className="text-gray-700 leading-relaxed">
                    You are advised to review this Privacy Policy periodically for any
                    changes. Changes to this Privacy Policy are effective when they
                    are posted on this page.
                  </p>
                </div>
              </section>

              <section className="pt-6">
                <h2 className="text-2xl font-bold text-[#0e4c92] mb-6 pb-2 border-b border-gray-200">Contact Us</h2>
                <div className="bg-[#0e4c92] text-white p-6 rounded-lg">
                  <p className="mb-4 leading-relaxed">
                    If you have any questions about this Privacy Policy, please
                    contact us at:
                  </p>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div className="flex items-center">
                      <span className="w-2 h-2 bg-white rounded-full mr-3"></span>
                      <span>privacy@medselecthub.com</span>
                    </div>
                    <div className="flex items-center">
                      <span className="w-2 h-2 bg-white rounded-full mr-3"></span>
                      <span>+1 (555) 123-4567</span>
                    </div>
                    <div className="flex items-center">
                      <span className="w-2 h-2 bg-white rounded-full mr-3"></span>
                      <span>123 Health Ave, Suite 101</span>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  );
};